<template>
  <div class="timeline-view">
    <div class="container">
      <h1 class="page-title">大事记</h1>
      <p class="page-subtitle">记录网站发展的重要里程碑和事件</p>
      
      <!-- Major Events Section (New Grid Design) -->
      <section class="major-events-section">
        <h2 class="section-title">重要事件</h2>
        <p class="section-description">通过热力图回顾网站过去一年的重要活动分布</p>
        <div class="new-event-grid">
          <!-- Grid cells will be rendered here -->
          <div v-for="day in gridData" :key="day.date" class="grid-cell" :style="{ backgroundColor: day.color }">
            <!-- Optional: Add tooltip on hover if needed -->
          </div>
        </div>
      </section>
      
      <!-- Quarterly Events Section -->
      <section class="quarterly-events-section">
        <h2 class="section-title">季度事件</h2>
        <p class="section-description">按季度展示关键计划与已完成项目</p>
        <div class="quarter-cards-container">
          <div 
            v-for="quarter in quarterlyEvents" 
            :key="quarter.label" 
            class="quarter-card"
            :class="{ 'is-flipped': quarter.isFlipped, 'is-future': quarter.isFuture }"
            @click="toggleCard(quarter)"
          >
            <div class="card-face card-face-front">
              <div v-if="quarter.isFuture" class="future-content">
                <i class="fas fa-question-circle future-icon"></i>
                <p class="future-text">敬请期待</p>
              </div>
              <div v-else class="quarter-content">
                <h3 class="quarter-label">{{ quarter.label }}</h3>
                <ul class="event-preview">
                  <li v-for="(event, index) in quarter.previewEvents" :key="index">{{ event }}</li>
                  <li v-if="quarter.events.length > quarter.previewEvents.length">...</li>
                </ul>
                <span class="flip-hint">点击查看详情</span>
              </div>
            </div>
            <div class="card-face card-face-back">
              <h3 class="quarter-label">{{ quarter.label }}</h3>
              <ul class="event-list">
                <li v-for="(event, index) in quarter.events" :key="index">{{ event }}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- Regular Timeline Section -->
      <section class="timeline-section">
        <h2 class="section-title">常规事件</h2>
        <p class="section-description">按时间顺序回顾网站的日常活动和更新</p>
        <div class="timeline">
          <!-- Your existing timeline content -->
          <!-- Add your regular timeline content here -->
        </div>
      </section>

      <!-- Radar Chart Section -->
      <section class="radar-chart-container">
        <h2 class="section-title">网站特征剖析</h2>
        <p class="section-description">从多个维度了解网站当前的状态和未来发展方向</p>
        <v-chart class="radar-chart" :option="radarChartOptions" />
      </section>

      <!-- Open Source Projects Section -->
      <section class="open-source-projects-section">
        <h2 class="section-title">开源项目精选</h2>
        <p class="section-description">展示心灵空间孵化和贡献的开源项目</p>
        <div class="project-showcase-content">
          <div class="project-carousel">
             <carousel :items-to-show="1" :wrap-around="true">
                <slide v-for="(image, index) in projectScreenshots" :key="index">
                   <img :src="image.src" :alt="image.alt" class="carousel-image">
                </slide>

                <template #addons>
                   <navigation />
                   <pagination />
                </template>
             </carousel>
          </div>
          <div class="project-description">
            <h3>CRM 后台管理系统</h3>
            <p>深入幕后，探索心灵空间的基石——这款开源 CRM 后台管理系统。</p>
            <p>它不仅是数据与流程的集散地，更是我们与用户、与项目深度连接的体现。从仪表盘的数据洞察，到用户管理的细致入微，再到系统设置的灵活配置，每一个模块都承载着提升效率、优化体验的初心。</p>
            <p>这不仅仅是一个工具，更是我们对于高效、透明、以人为本管理理念的实践。通过开源，我们希望能与更多志同道合的开发者一同完善，让心灵空间的运营更加顺畅，也将这份技术积累回馈给社区。</p>
             <div class="project-links">
                 <a href="#" class="project-link">GitHub 仓库</a>
                 <a href="#" class="project-link">项目文档</a>
             </div>
          </div>
        </div>
      </section>
    </div>
    
    <!-- Tooltip can be kept or removed depending on new design -->
    <!-- <div class="tooltip" ref="tooltip"></div> -->
  </div>
</template>

<script>
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { RadarChart } from 'echarts/charts';
import { TitleComponent, LegendComponent, TooltipComponent, RadarComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// Import carousel components and styles
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';

use([
  RadarChart,
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  RadarComponent,
  CanvasRenderer,
]);

export default {
  name: 'TimelineView',
  components: {
    VChart,
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
  data() {
    return {
      gridData: [], // Data for the new grid
      colorMap: { // Simple color mapping based on count ranges
        0: '#161b22', // No activity
        1: '#0e4429', // Low
        2: '#006d32', // Medium
        3: '#26a641', // High
        4: '#39d353', // Very High
      },
      quarterlyEvents: [
        { 
          label: '2024-Q4', 
          isFuture: false, 
          previewEvents: ['完成网格重构', '新增雷达图模块'], // Events for front preview
          events: [ // Full event list for back
            '完成GitHub风格网格图的初步重构工作，优化数据展示',
            '成功集成网站特征雷达图，提供数据可视化分析能力',
            '重新设计并实现了开源项目展示模块，提升项目曝光度',
            '优化了多语言加载逻辑，提高了页面性能'
          ],
          isFlipped: false 
        },
        { 
          label: '2025-Q1', 
          isFuture: false, 
          previewEvents: ['规划新功能', '用户调研分析'],
          events: [
            '启动下一年度网站功能规划会议，确定开发重点',
            '组织用户问卷调研及访谈，收集改进意见',
            '基于用户反馈，细化并调整部分功能设计方案'
          ],
          isFlipped: false 
        },
         { 
          label: '2025-Q2', 
          isFuture: false, 
          previewEvents: ['启动移动端适配', 'UI/UX优化'],
          events: [
            '正式启动网站移动端适配工作，确保跨设备体验一致性',
            '进行网站整体UI/UX设计优化，提升视觉美感和操作便捷性'
          ],
          isFlipped: false 
        },
        { label: '2025-Q3', isFuture: true, previewEvents: [], events: [], isFlipped: false },
        { label: '2025-Q4', isFuture: true, previewEvents: [], events: [], isFlipped: false },
      ],
      // 雷达图数据和配置
      radarChartOptions: {},
      // 开源项目截图数据
      projectScreenshots: [
        { src: '/src/assets/project/1.png', alt: 'CRM Dashboard - English' },
        { src: '/src/assets/project/2.png', alt: 'CRM Dashboard - Chinese' },
        { src: '/src/assets/project/3.png', alt: 'CRM Dashboard - Light Mode' },
      ],
    }
  },
  mounted() {
    this.generateGridData(); // Generate data for the new grid
    this.generateRadarChartOptions()
  },
  methods: {
    generateGridData() {
      const data = [];
      const today = new Date();
      const startDate = new Date();
      startDate.setDate(today.getDate() - 364); // Data for the past year

      for (let i = 0; i < 365; i++) {
        const date = new Date(startDate);
        date.setDate(startDate.getDate() + i);

        // Simple random data generation for demonstration (0 to 4 levels)
        let count = Math.floor(Math.random() * 5); // Generates 0, 1, 2, 3, or 4

        data.push({
          date: date.toISOString().split('T')[0],
          count: count,
          color: this.colorMap[Math.min(count, 4)] // Map count to color level (cap at 4)
        });
      }

      this.gridData = data;
    },

    toggleCard(quarter) {
      if (!quarter.isFuture) {
        quarter.isFlipped = !quarter.isFlipped;
      }
    },

    generateRadarChartOptions() {
      this.radarChartOptions = {
        title: {
          text: '网站特征分析', // Chart title (hidden as we have an h2)
          show: false,
        },
        tooltip: {},
        legend: {
          data: ['当前网站', '目标理想状态'],
          bottom: 0,
          textStyle: {
            color: '#c9d1d1', 
          },
        },
        radar: {
          indicator: [
            { name: '内容丰富度', max: 100 },
            { name: '用户互动性', max: 100 },
            { name: '界面美观度', max: 100 },
            { name: '性能优化', max: 100 },
            { name: '社区活跃度', max: 100 },
            { name: '原创内容比例', max: 100 }
          ],
           axisName: {
              color: '#8b949e'
           },
           splitLine: {
                lineStyle: {
                    color: '#30363d'
                }
            },
            splitArea: {
                areaStyle: {
                    color: 'rgba(45, 58, 73, 0.5)' 
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#30363d'
                }
            }
        },
        series: [
          {
            name: '网站特征',
            type: 'radar',
            data: [
              {
                value: [70, 60, 80, 75, 50, 65],
                name: '当前网站',
                 areaStyle: {
                    color: 'rgba(88, 166, 255, 0.6)' // Blue with transparency
                },
                itemStyle: {
                    color: 'rgba(88, 166, 255, 1)' // Blue
                },
                 lineStyle: {
                    color: 'rgba(88, 166, 255, 1)'
                }
              },
              {
                value: [90, 85, 95, 90, 80, 90],
                name: '目标理想状态',
                 areaStyle: {
                    color: 'rgba(63, 185, 80, 0.6)' // Green with transparency
                },
                 itemStyle: {
                    color: 'rgba(63, 185, 80, 1)' // Green
                },
                  lineStyle: {
                    color: 'rgba(63, 185, 80, 1)'
                }
              }
            ]
          }
        ]
      };
    },
  }
}
</script>

<style scoped>
.timeline-view {
  padding: 80px 0;
  background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
  color: #c9d1d9;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  text-align: center;
  font-size: 2.8rem;
  background: linear-gradient(90deg, #58a6ff, #8b949e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem; /* Adjusted margin */
  letter-spacing: -0.5px;
}

.page-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #8b949e;
    margin-bottom: 4rem; /* Added bottom margin */
}

.section-title {
  font-size: 2rem;
  color: #c9d1d9;
  margin-bottom: 1rem; /* Adjusted margin */
  text-align: center;
}

.section-description {
    text-align: center;
    font-size: 1rem;
    color: #8b949e;
    margin-bottom: 3rem; /* Added bottom margin */
}

.major-events-section,
.quarterly-events-section,
.timeline-section,
.radar-chart-container,
.open-source-projects-section {
    margin-bottom: 4rem;
    padding-top: 4rem;
    border-top: 1px solid #30363d;
}

.major-events-section:first-of-type {
    padding-top: 0;
    border-top: none;
}

.new-event-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px; /* Adjust gap as needed */
  padding: 1rem;
  background: rgba(13, 17, 23, 0.7);
  border: 1px solid #30363d;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.new-event-grid .grid-cell {
  width: 15px; /* Adjust size as needed */
  height: 15px; /* Adjust size as needed */
  border-radius: 3px;
  /* Background color is set inline from data */
}

.quarterly-events-section .section-title,
.timeline-section .section-title,
.radar-chart-container .section-title,
.open-source-projects-section .section-title {
    margin-bottom: 1rem; /* Adjusted margin */
}

.quarterly-events-section .section-description,
.timeline-section .section-description,
.radar-chart-container .section-description,
.open-source-projects-section .section-description {
    margin-bottom: 3rem; /* Added bottom margin */
}

.quarter-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.quarter-card {
    width: 280px; /* Adjust card width as needed */
    height: 200px; /* Adjust card height as needed */
    perspective: 1000px;
    cursor: pointer;
    position: relative;
}

.quarter-card.is-future {
    cursor: default;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    background: rgba(13, 17, 23, 0.8);
    border: 1px solid #30363d;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.card-face-front {
    transform: rotateY(0deg);
}

.card-face-back {
    transform: rotateY(180deg);
}

.quarter-card.is-flipped .card-face-front {
    transform: rotateY(-180deg);
}

.quarter-card.is-flipped .card-face-back {
    transform: rotateY(0deg);
}

.future-content {
    text-align: center;
    color: #8b949e;
}

.future-icon {
    font-size: 4rem;
    color: #58a6ff;
    margin-bottom: 1rem;
}

.future-text {
    font-size: 1.2rem;
    font-weight: bold;
}

.quarter-content {
    text-align: center;
}

.quarter-label {
    font-size: 1.8rem;
    color: #58a6ff;
    margin-bottom: 1rem;
}

.event-preview,
.event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}

.event-preview li,
.event-list li {
    font-size: 1rem;
    color: #c9d1d9;
    margin-bottom: 0.5rem;
    padding-left: 1.2rem;
    position: relative;
}

.event-list li::before {
    content: '•'; /* Using a simple bullet point */
    color: #58a6ff; /* Bullet color */
    position: absolute;
    left: 0;
}

.event-preview li::before {
     content: '-'; /* Using a hyphen for preview */
    color: #58a6ff; /* Hyphen color */
    position: absolute;
    left: 0;
}

.flip-hint {
    font-size: 0.9rem;
    color: #8b949e;
    margin-top: 1rem;
    display: block;
}

/* Add responsive adjustments */
@media (max-width: 768px) {
  .timeline-view {
    padding: 40px 0;
  }

  .container {
      padding: 0 15px;
  }

  .page-title {
    font-size: 2.2rem;
    margin-bottom: 0.5rem; /* Adjusted margin */
  }

  .page-subtitle {
      font-size: 1rem;
      margin-bottom: 3rem; /* Adjusted margin */
  }

  .section-title {
    font-size: 1.8rem;
    margin-bottom: 0.8rem; /* Adjusted margin */
  }

  .section-description {
      font-size: 0.9rem;
      margin-bottom: 2rem; /* Adjusted margin */
  }

  .major-events-section,
  .quarterly-events-section,
  .timeline-section,
  .radar-chart-container,
  .open-source-projects-section {
      margin-bottom: 3rem;
      padding-top: 3rem;
  }

  .new-event-grid {
      padding: 0.8rem;
      gap: 2px;
  }

  .new-event-grid .grid-cell {
      width: 12px;
      height: 12px;
  }

  .quarter-cards-container {
      gap: 1.5rem;
  }

  .quarter-card {
      width: 250px;
      height: 180px;
  }

  .card-face {
      padding: 1rem;
  }

  .future-icon {
      font-size: 3rem;
  }

  .future-text {
      font-size: 1rem;
  }

  .quarter-label {
      font-size: 1.5rem;
  }

  .event-preview li,
  .event-list li {
      font-size: 0.9rem;
  }

   .radar-chart {
        height: 300px; /* Adjust height for smaller screens */
    }

    .project-showcase-content {
        gap: 20px;
    }

     .project-description h3 {
        font-size: 1.3em;
    }
}

@media (min-width: 768px) {
    .project-showcase-content {
        flex-direction: row; /* Arrange in a row on larger screens */
        justify-content: center; /* Center content horizontally */
        gap: 50px; /* Increase space in row layout */
    }

    .project-carousel,
    .project-description {
        flex: 1; /* Allow items to grow and shrink */
        max-width: none; /* Remove max-width in row layout */
    }

     .project-description {
        text-align: left;
     }

     .project-links {
        justify-content: flex-start; /* Align links to the left in row layout */
     }
}

/* Styles for Radar Chart and Open Source Projects */
.radar-chart-container .section-title,
.open-source-projects-section .section-title {
    margin-bottom: 1rem; /* Adjusted margin */
}

.radar-chart-container .section-description,
.open-source-projects-section .section-description {
    margin-bottom: 3rem; /* Added bottom margin */
}

.radar-chart {
  width: 100%;
  height: 400px; /* Adjust height as needed */
}

.project-showcase-content {
  display: flex;
  flex-direction: column; /* Stack carousel and description initially */
  gap: 30px; /* Space between carousel and description */
  align-items: center; /* Center content horizontally */
}

.project-carousel {
  width: 100%;
  max-width: 600px;
  background-color: transparent;
  min-height: auto;
  display: flex;
  justify-content: center;
  border-radius: 8px;
   overflow: hidden; /* Hide parts of images that exceed container */
}

.carousel-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.project-description {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.project-description h3 {
  color: #c9d1d9;
  font-size: 1.5em;
  margin-bottom: 10px;
}

.project-description p {
  color: #8b949e;
  line-height: 1.6;
  margin-bottom: 15px; /* Add space between paragraphs */
}

.project-links {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center; /* Center links horizontally */
}

.project-link {
    display: inline-block;
    background-color: #58a6ff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.project-link:hover {
    background-color: #4493f3;
}
</style> 